<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web存储</title>
</head>
<body onload="initData">

    <form action="http://www.baidu.com">
        用户名:<input type="text" id="uname">
        密码:<input type="password" id="pwd"><br>
        <input type="checkbox" id="savePwd">记住密码<br>
        <input type="button" value="提交" onclick="login()">
    </form>

    <script>
        //加载页面完毕之后,触发initData()
        function initData(){
            //根据key获取本地的value
            var uname = localStorage.getItem("username");
            var pwd = localStorage.getItem("password");

            //给文本框和密码框对象设置value属性
            document.getElementById("uname").value = uname;
            document.getElementById("pwd").value = pwd;
            
        }
        

        //定义函数
        function login(){
            //获取checkbox对象
            var ck = document.getElementById("savePwd");
            //如果勾选了,则为true
            if(ck.checked){
                //获取用户名
                var uname = document.getElementById("uname").value;
                //获取密码
                var pwd = document.getElementById("pwd").value;

                //将用户名和密码进行本地存储
                //单个单个进行存储数据key-value
                localStorage.setItem("username",uname);
                localStorage.setItem("password",pwd);

            }else{
                localStorage.clear();
            }

        }
        
    
    </script>

    
</body>
</html>